<template>
  <div class="app-container home">
  

    <el-row type="flex" justify="space-around" class="row-bg">
      <el-card class="box-card cardDiv1">
        <el-col :span="5">
          <div class="box-div card1">
            <div class="webBox">
              <div class="webO">今日交易额:</div>
              <div class="webT">￥645334.45</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card2">
            <div class="webBox">
              <div class="webO">今日订单数量:</div>
              <div class="webT">7512</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card3">
            <div class="webBox">
              <div class="webO">今日访问人数:</div>
              <div class="webT">53101</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card4">
            <div class="webBox">
              <div class="webO">今日新增用户:</div>
              <div class="webT">8868</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card5">
            <div class="webBox">
              <div class="webO">累计用户量:</div>
              <div class="webT">895421</div>
            </div>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-row
      type="flex"
      justify="space-around"
      class="row-bg"
      style="margin-bottom: 10px"
    >
      <el-col :span="10">
        <el-card class="box-card" style="height: 320px; margin-right: 10px">
          <div id="main1" style="height: 300px; width: 700px"></div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card" style="height: 320px; margin-right: 10px">
          <div id="main2" style="height: 270px; width: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card class="box-card" style="height: 320px">
          <div id="main3" style="height: 270px; width: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" class="row-bg">
      <el-col :span="14" style="margin-right: 10px">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span style="margin-right: 30px">订单信息</span>
            <el-badge :value="99" class="item">
              <el-button type="text" size="small">待处理订单</el-button>
            </el-badge>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多</el-button
            >
          </div>
          <el-table :data="tableData2" height="300" style="width: 100%">
            <el-table-column prop="code" label="订单编号"> </el-table-column>
            <el-table-column prop="date" label="下单日期"> </el-table-column>
            <el-table-column prop="money" label="交易金额"> </el-table-column>
            <el-table-column prop="name" label="客户名称"> </el-table-column>
            <el-table-column prop="status" label="订单状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '1'" style="color: #ff9933"
                  >待发货</span
                >
                <span v-if="scope.row.status === '2'" style="color: #ff5722"
                  >已退货</span
                >
                <span v-if="scope.row.status === '3'" style="color: #1890ff"
                  >已取消</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-view" size="small" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span>客户信息</span>
            <el-badge :value="99" class="item" style="visibility: hidden">
              <el-button type="text" size="small">待处理订单</el-button>
            </el-badge>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多</el-button
            >
          </div>
          <el-table :data="tableData" height="300" style="width: 100%">
            <el-table-column prop="name" label="客户名称"> </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column prop="money" label="消费金额"> </el-table-column>
            <el-table-column prop="level" label="会员级别">
              <template slot-scope="scope">
                <span v-if="scope.row.level === '1'"
                  ><el-tag type="danger">至尊</el-tag></span
                >
                <span v-if="scope.row.level === '2'"
                  ><el-tag type="success">钻石</el-tag></span
                >
                <span v-if="scope.row.level === '3'"
                  ><el-tag type="warning">黄金</el-tag></span
                >
                <span v-if="scope.row.level === '4'"
                  ><el-tag type="info">普通</el-tag></span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-view" size="small" @click="handleViewCustomer(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单信息对话框 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="30%">
      <div v-if="currentOrder">
        <p><strong>订单编号：</strong>{{ currentOrder.code }}</p>
        <p><strong>下单日期：</strong>{{ currentOrder.date }}</p>
        <p><strong>交易金额：</strong>{{ currentOrder.money }}</p>
        <p><strong>客户名称：</strong>{{ currentOrder.name }}</p>
        <p><strong>订单状态：</strong>
          <span v-if="currentOrder.status === '1'" style="color: #ff9933">待发货</span>
          <span v-if="currentOrder.status === '2'" style="color: #ff5722">已退货</span>
          <span v-if="currentOrder.status === '3'" style="color: #1890ff">已取消</span>
        </p>
      </div>
    </el-dialog>

    <!-- 客户信息对话框 -->
    <el-dialog title="客户详情" :visible.sync="customerDialogVisible" width="30%">
      <div v-if="currentCustomer">
        <p><strong>客户名称：</strong>{{ currentCustomer.name }}</p>
        <p><strong>联系电话：</strong>{{ currentCustomer.phone }}</p>
        <p><strong>消费金额：</strong>{{ currentCustomer.money }}</p>
        <p><strong>会员级别：</strong>
          <span v-if="currentCustomer.level === '1'"><el-tag type="danger">至尊</el-tag></span>
          <span v-if="currentCustomer.level === '2'"><el-tag type="success">钻石</el-tag></span>
          <span v-if="currentCustomer.level === '3'"><el-tag type="warning">黄金</el-tag></span>
          <span v-if="currentCustomer.level === '4'"><el-tag type="info">普通</el-tag></span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "HomeIndex",
  data() {
    return {
      // 版本号
      version: "3.8.6",
      tableData: [
        {
          money: "8856.56",
          name: "吴家辉",
          phone: "18888888888",
          level: "1",
        },
        {
          money: "2384.50",
          name: "王植军",
          phone: "18888888888",
          level: "2",
        },
        {
          money: "6000.20",
          name: "张声永",
          phone: "13688888888",
          level: "3",
        },
        {
          money: "5558.34",
          name: "欧阳后涛",
          phone: "13688888888",
          level: "4",
        },
        {
          money: "1234.25",
          name: "张春桥",
          phone: "13688888888",
          level: "3",
        },
        {
          money: "1234.25",
          name: "彭于晏",
          phone: "13688888888",
          level: "3",
        },
        {
          money: "1234.25",
          name: "钱七",
          phone: "13688888888",
          level: "2",
        },
      ],
      tableData2: [
        {
          date: "2016-05-02",
          name: "张三峰",
          code: "454545454234455",
          money: "2422",
          status: "1",
        },
        {
          date: "2016-05-02",
          name: "李奎",
          code: "234234234324234",
          money: "7870.00",
          status: "1",
        },
        {
          date: "2016-05-02",
          name: "老王",
          code: "23523523544644",
          money: "34545.2",
          status: "1",
        },
        {
          date: "2016-05-02",
          name: "赵无极",
          code: "25235235235325",
          money: "3430",
          status: "2",
        },
        {
          date: "2016-05-02",
          name: "林黛玉",
          code: "25235235235325",
          money: "3430",
          status: "3",
        },
      ],
      dialogVisible: false,
      customerDialogVisible: false,
      currentOrder: null,
      currentCustomer: null,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.setLineData();
      this.setbData();
      this.setBireData();
    });
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    setLineData() {
      var chartDom = document.getElementById("main1");
      if (chartDom) {
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: [
            {
              text: "一周交易额",
              textStyle: {
                fontSize: 15,
              },
            },
            {
              text: "单位:万元",
              left: "80%",
              textStyle: {
                fontSize: 13,
                fontWeight: 100,
              },
            },
          ],
          xAxis: {
            type: "category",
            data: ["3-16", "3-17", "3-18", "3-19", "3-20", "3-21", "3-22"],
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: "line",
              itemStyle: {
                color: "#2ec7c9",
                lineStyle: {
                  color: "rgb(30 198 149)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);
      }
    },
    setbData() {
      var chartDom = document.getElementById("main2");
      if (chartDom) {
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          color: ["#49bafc", "#e9898f", "#f7b230", "#bd92e1", "#26c8aa"],
          title: {
            text: "商品销售额占比",
            left: "left",
            textStyle: {
              fontSize: 15,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            bottom: 1,
            left: "center",
            data: ["食品", "服装", "家电", "日用品", "原材料"],
          },
          series: [
            {
              type: "pie",
              radius: "65%",
              center: ["50%", "45%"],
              selectedMode: "single",
              data: [
                { value: 1548, name: "原材料" },
                { value: 735, name: "日用品" },
                { value: 510, name: "家电" },
                { value: 434, name: "服装" },
                { value: 335, name: "食品" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);
      }
    },
    setBireData() {
      var chartDom = document.getElementById("main3");
      if (chartDom) {
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: "订单状态",
            textStyle: {
              fontSize: 15,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true, //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false,
            },
            axisLine: {
              //x轴坐标轴
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },
          },
          yAxis: {
            type: "category", //纵向改成横向柱状图
            data: [
              "今日取消订单",
              "今日评价订单",
              "今日退货订单",
              "今日发货订单",
            ], //y轴显示文字
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: "",
              type: "bar",
              barWidth: 20,
              showSymbol: false,
              label: {
                // 直接将 textStyle 属性移到 label 下
                show: true,
                position: "insideTop", //内部顶部显示
                color: "#FFF", //字体颜色
                fontSize: 14, //字体大小
              },
              data: [
                {
                  value: 1546,
                  itemStyle: {
                    borderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(30, 198, 149, 1)",
                        },
                        {
                          offset: 0.6,
                          color: "rgba(30, 198, 149, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(51, 204, 204, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                {
                  value: 860,
                  itemStyle: {
                    borderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(170, 137, 254, 1)",
                        },
                        {
                          offset: 0.6,
                          color: "rgba(170, 137, 254, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(204, 153, 204, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                {
                  value: 1022,
                  itemStyle: {
                    borderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(226, 113, 140, 1)",
                        },
                        {
                          offset: 0.6,
                          color: "rgba(244, 174, 149, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(244, 174, 149, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                {
                  value: 1600,
                  itemStyle: {
                    borderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(255, 153, 51, 1)",
                        },
                        {
                          offset: 0.6,
                          color: "rgba(255, 153, 51, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(239, 203, 45, 1)",
                        },
                      ],
                      false
                    ),
                  },
                },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    },
    handleView(row) {
      this.currentOrder = row;
      this.dialogVisible = true;
    },
    handleViewCustomer(row) {
      this.currentCustomer = row;
      this.customerDialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-card__body {
  padding: 15px 20px 20px 20px;
  display: flex;
  justify-content: center;
}

.box-div {
  height: 120px;
  padding: 35px;
  margin: 20px;
}
.cardDiv1 {
  width: 100%;
  margin-bottom: 10px;
}
.cardDiv2 {
  width: 100%;
  margin-bottom: 20px;
}
.app-container {
  padding: 20px;
  background: #eeeeee50;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .webBox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .webO {
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }
  .webT {
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: center;
    font-size: 20px;
    font-weight: 700;
    padding-right: 50px;
    padding-top: 10px;
    color: #fff;
  }
  .card1 {
    background: linear-gradient(
      180deg,
      rgba(30, 198, 149, 1) 0%,
      rgba(30, 198, 149, 1) 0%,
      rgba(51, 204, 204, 1) 100%,
      rgba(51, 204, 204, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card2 {
    background: linear-gradient(
      90deg,
      rgba(244, 174, 149, 1) 0%,
      rgba(244, 174, 149, 1) 0%,
      rgba(226, 113, 140, 1) 100%,
      rgba(226, 113, 140, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card3 {
    background: linear-gradient(
      180deg,
      rgba(255, 153, 51, 1) 0%,
      rgba(255, 153, 51, 1) 0%,
      rgba(239, 203, 45, 1) 100%,
      rgba(239, 203, 45, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card4 {
    background: linear-gradient(
      180deg,
      rgba(45, 169, 250, 1) 0%,
      rgba(45, 169, 250, 1) 0%,
      rgba(102, 204, 255, 1) 100%,
      rgba(102, 204, 255, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card5 {
    background: linear-gradient(
      180deg,
      rgba(170, 137, 254, 1) 0%,
      rgba(170, 137, 254, 1) 0%,
      rgba(204, 153, 204, 1) 100%,
      rgba(204, 153, 204, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
}
</style>